/**
 * 格式说明: 属性名称==对应属性编辑器的组件配置
 */

interface EditorProps {
  required?: boolean;
  // 占位符
  placeholder?: string;
  // 提示信息
  tooltip?: string
}

interface EditorConfig {
  // 编辑器
  editor: string,
  // 编辑器组件属性
  editorProps?: EditorProps
}

type PropType = {
  [key: string]: EditorConfig;
};

/**
 * 表单属性
 */
const formProps = {
  'layoutType': { editor: 'select-editor', editorProps: { 
    options: [
      { label: '水平', value: 'horizontal' },
      { label: '垂直', value: 'vertical' },
      { label: '单行', value: 'inline' },
    ]
  } },
}

/**
 * 公共属性
 */
const commonProps = {
  'formItemName': { editor: 'input-editor', editorProps: { required: true, tooltip: '表单中的唯一标识'  } },
  'formItemLabel': { editor: 'input-editor', editorProps: {} },
  'formItemLabelTooltip': { editor: 'input-editor', editorProps: {} },
  'formItemRequired': { editor: 'switch-editor', editorProps: {} },

  'readonly': { editor: 'switch-editor', editorProps: {} },
  'disabled': { editor: 'switch-editor', editorProps: {} },
  'defaultValue': { editor: 'default-value-editor', editorProps: {} },
  'placeholder': { editor: 'input-editor', editorProps: {} },
  'allowClear': { editor: 'switch-editor', editorProps: {} },
  'addonBefore': { editor: 'input-editor', editorProps: {} },
  'addonAfter': { editor: 'input-editor', editorProps: {} },
  'maxLength': { editor: 'input-number-editor', editorProps: {} },
  'bordered': { editor: 'switch-editor', editorProps: {} },
  'hidden': { editor: 'switch-editor', editorProps: {} },
  'rows': { editor: 'input-number-editor', editorProps: {} },
  'minRows': { editor: 'input-number-editor', editorProps: {} },
  'maxRows': { editor: 'input-number-editor', editorProps: {} },
  'autoSize': { editor: 'switch-editor', editorProps: { 
    tooltip: '如果设置了最小行数或最大行数, 则该选项无效' 
  }},
  // 字典编码
  'dictCode': { editor: 'input-editor' },
  // 字典组件类型
  'dictCompType': { 
    editor: 'select-editor', 
    editorProps: { 
      options: [
        { label: '单选框', value: 'radio' },
        { label: '单选按钮', value: 'radioButton' },
        { label: '下拉框', value: 'select' },
        { label: '多选', value: 'list' },
      ]
     } 
  },

  // 分割线方向
  'direction': { 
    editor: 'select-editor', 
    editorProps: { 
      options: [
        { label: '左侧', value: 'left' },
        { label: '中间', value: 'center' },
        { label: '右侧', value: 'right' },
      ]
    } 
  },
  // 标题和最近 left/right 边框之间的距离
  'directionMargin': { 
    editor: 'input-editor', 
    editorProps: { 
      tooltip: '标题和最近左侧/右侧边框之间的距离，去除了分割线，同时方向必须为左侧或右侧'
    }
  },
  // 是否为虚线
  'dashed': { editor: 'switch-editor' },
  // star 总数
  'showCount': { editor: 'input-editor' },
  // 是否允许半选
  'allowHalf': { editor: 'switch-editor' },
  // 自定义字符
  'character': { editor: 'input-editor' },
  // 输入框展示数量
  'inputShowCount': { editor: 'switch-editor' },
  // 展示图标
  'showIcon': { editor: 'switch-editor' },
  // 告警信息
  'alertMessage': { editor: 'input-editor' },

  'alertType': { 
    editor: 'select-editor', 
    editorProps: { 
      options: [
        { label: '普通', value: 'info' },
        { label: '警告', value: 'warning' },
        { label: '成功', value: 'success' },
        { label: '错误', value: 'error' },
      ]
     } 
  },
} as PropType

/**
 * 高级属性
 */
const advanceProps = {
  'checkedText': { editor: 'input-editor' },
  'unCheckedText': { editor: 'input-editor' },
} as PropType

/**
 * 样式相关属性
 */
const compStyleProps = {
  'style': { 
    editor: 'style-editor', 
    editorProps: { styleKeys: ['width']} 
  },
  
  'divider_style': { 
    editor: 'style-editor', editorProps: { 
    styleKeys: ['width', 'paddingTop', 'paddingBottom', 'marginTop', 'marginBottom']}
  },

  'rate_style': { 
    editor: 'style-editor', 
    editorProps: {  styleKeys: ['width', 'fontSize']} 
  },

  'alertStyle': { 
    editor: 'style-editor', 
    editorProps: {  styleKeys: ['width', 'marginTop', 'marginBottom']} 
  },
} as PropType

const formStyleProps = {
  'labelStyle': { editor: 'style-editor', editorProps: { styleKeys: ['width', 'textAlign']} },
} as PropType


/**
 * 属性类型type, comp: 组件属性, form: 表单属性
 */
const allProps = [
  { props: commonProps, type: 'comp', tag: '基础属性' } ,    // 组件属性-基础
  { props: advanceProps, type: 'comp', tag: '高级属性' } ,    // 组件属性-高级
  { props: compStyleProps, type: 'comp',  tag: '自定义样式' }, // 组件属性-样式
  { props: formProps, type: 'form', tag: '基础属性' }, // 表单属性
  { props: formStyleProps, type: 'form', tag: '自定义样式' } // 表单属性
] as any[]

/**
 * 判断属性是否已注册
 * @param uniquePropName 属性名称（保证名称唯一，不跟其他组件属性冲突）
 */
export function propertyRegistered(uniquePropName) {
  for (const item of allProps) {
    if (!!item.props[uniquePropName]) {
      return true
    }
  }
  return false
}

/**
 * 对数据进行分组
 * key: type, value: allProps中的value
 */
export function propertyGroup(props, groupField) {
  const resp : any = {}
  for(const item of props) {
    if (resp[item[groupField]]) {
      resp[item.type]?.push(item)
    } else {
      let value : any[] = []
      value.push(item)
      resp[item[groupField]] = value
    }
  }
  return resp
}

export default allProps


